<template>
  <div>
    <el-button :icon="FolderAdd" type="success" @click="handleImport"
      >批量导入
    </el-button>
    <w-import-excel
      ref="importRef"
      :api-export="false"
      :columns="templateColumns"
      :template="data"
      preview
      @save="postUserTemplate"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { FolderAdd } from '@element-plus/icons-vue'

const importRef = ref<any>(null)

const templateColumns = [
  {
    label: '姓名',
    prop: 'name',
  },
  {
    label: '身份证',
    prop: 'idCard',
  },
  {
    label: '年级名',
    prop: 'gradeName',
  },
  {
    label: '班级',
    prop: 'className',
  },
]

const data = ref([
  {
    name: 'un',
    idCard: '1233345',
    gradeName: '一年级',
    className: '1班',
  },
  {
    name: 'un2',
    idCard: '122331233345',
    gradeName: '一年级',
    className: '2班',
  },
])

const handleImport = () => {
  importRef.value.show()
}

const postUserTemplate = async (data: any) => {
  const { file } = data
  const formData = new FormData()
  formData.append('file', file)
  console.log(data)
  // const { msg }: any = await doImport(formData)
}
</script>